<template>
  <Popup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="1000"
    :height="800"
    :max-height="'95vh'"
    @hidden="hidden"
    title="编辑规格"
    @isReady="isReady"
    ref="popup"
  >
    <!-- v-model="activeName" @tab-click="handleClick" -->
    <DxScrollView width="100%" height="100%">
      <el-tabs type="card">
        <el-tab-pane label="规格信息">
          <DxForm
            id="form"
            :form-data="specificationModel"
            label-location="left"
            :col-count="2"
          >
            <DxGroupItem>
              <DxGroupItem caption="规格编码信息" :col-count="8">
                <DxSimpleItem
                  data-field="specificationId"
                  :editor-options="{ ...editOptions, disabled: true }"
                  :col-span="8"
                >
                  <DxLabel text="规格编码" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="name"
                  :col-span="5"
                  :editor-options="editOptions"
                >
                  <DxLabel text="规格名称" />
                </DxSimpleItem>
                <DxSimpleItem
                  :col-span="3"
                  data-field="isPreparedMedical"
                  editorType="dxCheckBox"
                  :editor-options="{ text: '非常备药品' }"
                >
                  <DxLabel :showColon="false" text=" " />
                </DxSimpleItem>
              </DxGroupItem>
              <DxGroupItem caption="规格单位信息" :col-count="2" >
                <DxSimpleItem
                  data-field="selling"
                  :editor-options="editOptions"
                >
                  <DxLabel text="售价单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="sellingNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="hospitalized"
                  :editor-options="editOptions"
                >
                  <DxLabel text="住院单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="hospitalizedNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="outpatient"
                  :editor-options="editOptions"
                >
                  <DxLabel text="门诊单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="outpatientNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="medicineLibrary"
                  :editor-options="editOptions"
                >
                  <DxLabel text="药库单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="medicineLibraryNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="delivery"
                  :editor-options="editOptions"
                >
                  <DxLabel text="送货单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="deliveryNumber"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="claimUnit"
                  editorType="dxSelectBox"
                  :editor-options="claimUnitListOptions"
                >
                  <DxLabel text="申领单位" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="delivery"
                  :editor-options="getSimpleSuffix('g')"
                >
                  <DxTextBox :disabled="true" :value="claimNumber" />
                  <DxLabel text="换算等于" />
                </DxSimpleItem>
              </DxGroupItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem
                  data-field="medicineType"
                  editorType="dxTagBox"
                  :editor-options="medicineTypeOptions"
                >
                  <DxLabel text="发药类型" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field="isHighRiskDrug"
                  editorType="dxSelectBox"
                  :editor-options="isHighRiskDrugOptions"
                >
                  <DxLabel text="高危药品" />
                </DxSimpleItem>
              </DxGroupItem>
            </DxGroupItem>
            <DxGroupItem caption="指定厂牌信息" :visible="false">
              <DxSimpleItem
                data-field=""
                editorType="dxSelectBox"
                :editor-options="tagSetting"
              >
                <DxLabel text="生产厂牌" />
              </DxSimpleItem>
              <DxSimpleItem data-field="" :editor-options="editOptions">
                <DxLabel text="商品名称" />
              </DxSimpleItem>
              <DxGroupItem :col-count="7">
                <DxSimpleItem
                  :col-span="4"
                  data-field=""
                  :editor-options="getSimpleSuffix('拼音')"
                >
                  <DxLabel text="药品简码" />
                </DxSimpleItem>
                <DxSimpleItem
                  :col-span="3"
                  data-field=""
                  :editor-options="getSimpleSuffix('五笔')"
                >
                </DxSimpleItem>
              </DxGroupItem>
              <DxSimpleItem data-field="" :editor-options="editOptions">
                <DxLabel text="注册商标" />
              </DxSimpleItem>
              <DxSimpleItem data-field="" :editor-options="editOptions">
                <DxLabel text="批准文号" />
              </DxSimpleItem>
              <DxSimpleItem
                data-field=""
                editorType="dxSelectBox"
                :editor-options="tagSetting"
              >
                <DxLabel text="合同单位" />
              </DxSimpleItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem
                  data-field=""
                  :col-span="1"
                  :editor-options="editOptions"
                >
                  <DxLabel text="主标识码" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field=""
                  :col-span="1"
                  :editor-options="editOptions"
                >
                  <DxLabel text="备用编码" />
                </DxSimpleItem>
              </DxGroupItem>
              <DxGroupItem :col-count="2">
                <DxSimpleItem data-field="" :editor-options="editOptions">
                  <DxLabel text="标识子码" />
                </DxSimpleItem>
                <DxSimpleItem
                  data-field=""
                  editorType="dxCheckBox"
                  :editor-options="{ text: 'GMP认证' }"
                >
                </DxSimpleItem>
              </DxGroupItem>
            </DxGroupItem>
            <DxGroupItem caption="指定厂牌信息" :disabled="true">
              <DxSimpleItem
                data-field=""
                :editor-options="{
                  text: '无指定厂牌信息，请在药品厂牌厂商管理中设置',
                  readOlny: true,
                }"
              >
              </DxSimpleItem>
            </DxGroupItem>
          </DxForm>
          <div style="height: 40px"></div>
        </el-tab-pane>
        <el-tab-pane label="价格及使用">
          <CreateDrugPrise
            v-model:value="specificationPriceModel"
            :dictionaryList="dictionaryList"
          ></CreateDrugPrise>
        </el-tab-pane>
      </el-tabs>
    </DxScrollView>

    <div class="lb-form-button-right">
      <DxButton
        text="取消"
        styling-mode="text"
        type="default"
        @click="hidden()"
      />

      <DxButton
        text="保存并继续添加"
        styling-mode="text"
        type="default"
        @click="save(0)"
      />
      <DxButton
        text="保存并退出"
        @click="save(1)"
        styling-mode="text"
        type="default"
      />
    </div>
  </Popup>
</template>

<script lang="ts">
import { DxPopup } from "devextreme-vue/popup";
import Popup from "@/framework/components/popup/popup.vue";
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxTabbedItem,
  DxTabPanelOptions,
  DxTab,
  DxRequiredRule,
  DxLabel,
} from "devextreme-vue/form";
import DxTagBox from "devextreme-vue/tag-box";
import DxCheckBox from "devextreme-vue/check-box";
import {
  ElButton,
  ElTable,
  ElTableColumn,
  ElIcon,
  ElTabs,
  ElTabPane,
} from "element-plus";
import {
  Vue,
  Options,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import { DxScrollView } from "devextreme-vue/scroll-view";
import { DxColumn, DxDataGrid, DxEditing } from "devextreme-vue/data-grid";
import DataSource from "devextreme/data/data_source";
import DxButton from "devextreme-vue/button";
import CreateDrugPrise from "./create-drug-prise.vue";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import DrugSkuData from "@/data-source/drug-sku";
import {
  DictionaryItemModel,
  SpecificationClient,
  SpecificationModel,
  SpecificationPriceModel,
} from "@/api/api_specificationclient";
import { DrugSpecificationMedicineType } from "@/config/field-const-name";
import { ApiTool } from "@/api/api-tool";
import DxTextBox from "devextreme-vue/text-box";

@Options({
  components: {
    Popup,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxTabbedItem,
    DxTabPanelOptions,
    DxTab,
    DxRequiredRule,
    DxLabel,
    DxTagBox,
    DxCheckBox,
    ElButton,
    ElTable,
    ElTableColumn,
    DxScrollView,
    DxColumn,
    DxDataGrid,
    DxEditing,
    DxButton,
    ElIcon,
    ElTabs,
    ElTabPane,
    CreateDrugPrise,
    DxTextBox,
  },
})
export default class extends Vue {
  specificationModel: SpecificationModel = {
    name: "",
    selling: "",
    sellingNumber: 0,
    hospitalized: "",
    hospitalizedNumber: 0,
    outpatient: "",
    outpatientNumber: 0,
    medicineLibrary: "",
    medicineLibraryNumber: 0,
    delivery: "",
    deliveryNumber: 0,
    claimUnit: 0,
    drugId: "",
  };
  specificationPriceModel: SpecificationPriceModel = {
    attributes: "",
    /** 指导差率 */
    guideDifference: 0,
    /** 中标价格 */
    biddingPrice: 0,
    /** 成本价格 */
    costPrice: 0,
    /** 加成率 */
    markupRate: 0,
    /** 采购扣率 */
    purchaseDeductionRate: 0,
    /** 当前售价 */
    currentSellingPrice: 0,
    /** 管理费比例 */
    managementFeeRatio: 0,
    /** 结算价 */
    settlementPrice: 0,
    /** 费别折扣(设置药品参不参与费用模块的打折计算) */
    feeDiscount: "",
    /** 增值税率 */
    vatRate: 0,
    /** 指导售价 */
    guidePrice: 0,
    /** 收入项目 */
    incomeItem: "",
    /** 药价级别 */
    drugPriceLevel: "",
    /** 基药类型 */
    typeOfBaseDrug: "",
    /** 病案费用 */
    medicalRecordCost: "",
    /** 药保类型 */
    drugInsurance: "",
    /** 服务对象 */
    serviceObject: "",
    /** 门诊分零 */
    zeroOutpatient: "",
    /** 住院分零 */
    beHospitalizedDivideZero: "",
    /** 差价让利 */
    priceDifference: 0,
  };

  specificationModelBase = Object.assign({}, this.specificationModel);
  specificationPriceModelBase = Object.assign({}, this.specificationPriceModel);

  @Prop({ type: Boolean, default: false })
  value!: boolean;
  @Emit("update:value")
  updateValue(e) {}

  @Emit("success")
  addSuccess() {}

  editOptions = {
    stylingMode: "outlined",
  };
  getSimpleSuffix(
    text: string,
    extendOptions: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    let options: dxSelectBoxOptions = {
      stylingMode: "outlined",
      buttons: [
        {
          name: "unit",
          location: "after",
          options: {
            text: text,
            stylingMode: "text",
          },
        },
      ],
    };
    return Object.assign({}, options, extendOptions);
  }

  tagSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    displayExpr: "displayValue",
    valueExpr: "dictionaryId",
    searchEnabled: true,
    searchExpr: "value",
    showDropDownButton: true,
  };
  getTagSetting(
    items: any[],
    addedOptions?: dxSelectBoxOptions
  ): dxSelectBoxOptions {
    return {
      ...this.tagSetting,
      ...addedOptions,
      items: items || [],
    };
  }
  // (归属类型 1:西成药  2中成药 3中草药 4未分类
  get medicineTypeOptions() {
    return this.getTagSetting(this.specificationModel.medicineTypeList || [], {
      displayExpr: "value",
      valueExpr: "id",
    });
  }
  get isHighRiskDrugOptions() {
    return this.getTagSetting(
      this.dictionaryList.drugSpecificationHighRiskDrug || []
    );
  }
  get claimUnitListOptions() {
    return this.getTagSetting(
      [
        { name: "售价单位", id: 0 },
        { name: "住院单位", id: 1 },
        { name: "门诊单位", id: 2 },
        { name: "药库单位", id: 3 },
        { name: "送货单位", id: 4 },
      ],
      {
        displayExpr: "name",
        valueExpr: "id",
      }
    );
  }
  get claimNumber() {
    let claimUnit = this.specificationModel.claimUnit;
    let key = "";
    switch (claimUnit) {
      case 0:
        key = "sellingNumber";
        break;
      case 1:
        key = "hospitalizedNumber";
        break;
      case 2:
        key = "outpatientNumber";
        break;
      case 3:
        key = "medicineLibraryNumber";
        break;
      case 4:
        key = "deliveryNumber";
        break;

      default:
        break;
    }
    return this.specificationModel[key];
  }
  get popupVisible() {
    return this.value;
  }
  set popupVisible(value) {
    this.updateValue(value);
  }

  dataSource = [];
  @Inject()
  apiTool: ApiTool;
  created() {
    let client = this.apiTool.createClient(SpecificationClient);
    this.listData = new DrugSkuData(client, this);
  }
  dictionaryList: DictionaryItemModel = {};
  // @Watch("value")
  // watchValue() {
  //   this.popupVisible = this.value;
  // }
  // 初始化
  isReady() {
    this.reset();
    this.getDetail();
  }
  // 重置窗口
  reset() {
    this.specificationModel = Object.assign({}, this.specificationModelBase);
    this.specificationPriceModel = Object.assign(
      {},
      this.specificationPriceModelBase
    );
  }
  // 规格id
  @Prop({ required: true })
  specificationId: string;

  // 药品id
  @Prop({ required: true })
  drugId: string;

  // 获取详情
  getDetail() {
    let client = this.apiTool.createClient(SpecificationClient);
    client.getSpecificationInfo(this.specificationId).then((res) => {
      let data = res.data;
      this.dictionaryList = data.dictionaryList;
      this.specificationModel = data.specificationModel;
      this.specificationPriceModel = data.specificationPriceModel;
    });
  }
  hidden() {
    this.popupVisible = false;
  }
  popup: Popup;
  listData: DrugSkuData;
  save(saveType) {
    this.specificationModel.drugId = this.drugId;
    let params = {
      specificationModel: this.specificationModel,
      specificationPriceModel: this.specificationPriceModel,
    };
    
    // 根据是否有id判断调添加/更新
    let fun = "add";
    if (this.specificationModel.specificationId) {
      fun = "update";
    }
    this.listData[fun](params).then((res) => {
      if (res) {
        this.addSuccess();
        if (!saveType) {
          this.reset();
        } else {
          this.hidden();
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 56px;
  padding: 15px;
  .title-content {
    display: flex;
    justify-content: space-between;

    .title-operation {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
